<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">派单人员：</span>
                <el-input
                    placeholder="请输入派单员名称"
                    v-model="state.dispatcherName"
                    @keyup.enter.native="handleSearch"
                    clearable
                >
                </el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">派单模式：</span>
                <el-select
                    v-model="state.dispatchType"
                    placeholder="请选择派单模式"
                    clearable
                >
                    <el-option
                        v-for="item in state.modeList"
                        :key="item.memberKey"
                        :label="item.memberName"
                        :value="item.memberKey"
                    />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">取货人员：</span>
                <el-input
                    placeholder="请输入取货员名称"
                    v-model="state.pickerName"
                    @keyup.enter.native="handleSearch"
                    clearable
                >
                </el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">订单号码：</span>
                <el-input
                    placeholder="请输入订单号码"
                    v-model="state.orderId"
                    @keyup.enter.native="handleSearch"
                    clearable
                >
                </el-input>
            </div>
            <div class="task-one__btn clearfix">
                <el-button
                    type="primary"
                    :loading="loading"
                    icon="Search"
                    @click="handleSearch"
                    >搜索</el-button
                >
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            row-key="sid"
            :header-cell-style="{
                background: '#F5F7FA',
                textAlign: 'center',
            }"
            :cell-style="
                ({ column }) => {
                    return {
                        textAlign:
                            column.className === 'operation-nav'
                                ? 'left'
                                : 'center',
                        paddingLeft:
                            column.className === 'operation-nav' ? '25px' : '0',
                    };
                }
            "
            border
            element-loading-background="rgba(255, 255, 255, 0.6)"
            @sort-change="sortChange"
        >
            <el-table-column
                prop="orderId"
                label="订单ID"
                min-width="200"
                fixed="left"
            ></el-table-column>
            <el-table-column
                prop="dispatcherName"
                label="派单员"
                min-width="200"
            >
            </el-table-column>
            <el-table-column
                prop="dispatchType"
                label="派单模式"
                min-width="160"
                sortable="custom"
            >
                <template #default="{ row }">
                    {{
                        dictStore.getDictMemberName(
                            "dispatch_mode",
                            row.dispatchType
                        )
                    }}
                </template>
            </el-table-column>
            <el-table-column
                prop="dispatchTime"
                label="派单时间"
                min-width="200"
                sortable="custom"
            />
            <el-table-column prop="pickerName" label="取货员" min-width="200">
            </el-table-column>
            <el-table-column
                prop="created"
                label="创建时间"
                min-width="160"
                sortable="custom"
            />
            <!-- <el-table-column
        label="操作"
        width="200"
        class-name="operation-nav"
        fixed="right"
      >
        <template #default="{ row }">
          <MoreBtn> --><!-- </MoreBtn>
        </template>
      </el-table-column> -->
        </el-table>

        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="slot, sizes, prev, pager, next, jumper"
        >
            <span class="color-#606266"
                >共&nbsp;{{
                    totalNums >= 100 * pageSize
                        ? `${100 * pageSize}+`
                        : totalNums
                }}&nbsp;条</span
            >
        </el-pagination>
    </div>
</template>

<script setup>
import { inject, reactive, onMounted, onActivated } from "vue";
import { useRouter } from "vue-router";
import OneLoad from "@mixins/one-load";
import MoreBtn from "@/components/MoreBtn.vue";
import { ElMessageBox } from "element-plus";
import { getDispatchRecords } from "@/apis/order/dispatchRecord";
import { useDictStore } from "@stores/dict.js";

const dictStore = useDictStore();
dictStore.getDictMembers("dispatch_mode").then((res) => (state.modeList = res));

const router = useRouter();
const $message = inject("$message");

const state = reactive({
    modeList: [],
    ascended: false,
    sortFieldName: null,
    dispatcherName: null,
    dispatchType: null,
    orderId: null,
    pickerName: null,
});

onActivated(() => {
    pubParams(getList);
});

/**
 * minxin列表加载
 */
const {
    loading,
    arr_data,
    pubRefreshParams,
    pubParams,
    page,
    pageSize,
    getdata,
    pageSizeNum,
    totalNums,
    openPaging,
} = OneLoad();

openPaging(getList);

function getList() {
    getdata(
        getDispatchRecords({
            current: page.value,
            size: pageSize.value,
            ascended: state.ascended,
            sortFieldName: state.sortFieldName,
            dispatcherName: state.dispatcherName,
            dispatchType: state.dispatchType,
            orderId: state.orderId,
            pickerName: state.pickerName,
        })
    );
}

// 搜索
const handleSearch = () => {
    pubRefreshParams(getList);
};

// 排序
const sortChange = (e) => {
    const { property, order } = e.column;
    state.ascended = order === "ascending";
    state.sortFieldName = order ? property : null;
    pubRefreshParams(getList);
};
</script>

<style lang="less" scoped></style>
